<template>
    <div ref="dom" class="example"></div>
</template>

<script>
import echarts from 'echarts'
// import { on, off } from '@/libs/tools'
import { newUserNumOfThe2days } from '@/api/user'
import { queryStartNumOf2days } from '@/api/page'
export default {
  name: 'serviceRequests',
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      // this.dom.resize()
    },
    getData (d1, d2, text) {
      const xData = []
      for (let i = 0; i < 24; i++) {
        xData.push(i)
      }
      const option = {
        title: {
          text
        },
        legend: {},
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '20%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            name: '昨天',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#96D28E'
            } },
            data: d1
          },
          {
            name: '今天',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
              color: '#BAD9FF'
            } },
            data: d2
          }

        ]
      }
      return option
    },
    switchDataType (type) {
      if (type === 0) { // 新增用户（今日）
        this.dom.showLoading()
        newUserNumOfThe2days().then(res => {
          this.dom.hideLoading()
          this.dom.setOption(this.getData(
            res.yestodayData,
            res.todayData,
            '新增用户'
          ))
        }).catch(_ => {
          this.dom.hideLoading()
        })
      } else if (type === 1) { // 启动次数
        this.dom.showLoading()
        queryStartNumOf2days().then(res => {
          this.dom.hideLoading()
          this.dom.setOption(this.getData(
            res.yestodayData,
            res.todayData,
            '启动次数'
          ))
        }).catch(_ => {
          this.dom.hideLoading()
        })
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.dom = echarts.init(this.$refs.dom)
      this.dom.showLoading()
      newUserNumOfThe2days().then(res => {
        this.dom.hideLoading()
        this.dom.setOption(this.getData(
          res.yestodayData,
          res.todayData,
          '新增用户'
        ))
      }).catch(_ => {
        this.dom.hideLoading()
      })
    })
  },

  beforeDestroy () {
    // off(window, 'resize', this.resize())
  }
}
</script>
